<template>
    <div class="login-container">
        <div class="modal">
            <h1>素晰管理系统</h1>
            <el-form :model="loginForm" status-icon :rules="loginFormRules" ref="loginRef">
                <el-form-item prop="name">
                    <el-input v-model="loginForm.name" :prefix-icon="User"/>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password"   :prefix-icon="Lock" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="btn-login" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import { User, Lock } from '@element-plus/icons-vue'
    export default {
        name: "Login",
        data() {
            return {
                loginForm: {
                    name: 'doria',
                    password: '123456'
                },
                loginFormRules: {
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur'},
                        { min: 6, max: 12, message: '请输入6到12位密码', trigger: 'blur' },
                    ]
                }
            }
        },
        setup() {
            return {
                User,
                Lock
            }
        },
        methods: {
            login() {
                this.$refs.loginRef.validate((valid) => {
                    if (valid) {
                        this.$api.login(this.loginForm, false).then(res => {
                            console.log(res)
                            this.$store.commit('setUserInfo', res.userInfo)
                            this.$store.commit('setToken', res.token)
                            this.$router.push('/')
                        })
                    }
                })
            }
        }
    }
</script>
<style lang="scss">
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9fcff;
    width: 100vw;
    height: 100vh;
    .modal {
        width: 500px;
        padding: 50px;
        background-color: #ffffff;
        box-shadow: 0 0 8px 3px rgba(0,0,0, .1);
        border-radius: 5px;
        h1{
            text-align: center;
            font-size: 32px;
            line-height: 24px;
            margin-bottom: 40px;
        }
        .btn-login{
            margin-top: 24px;
            width: 100%;
        }
    }
}
</style>
